<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Realtime Transcription -- Agora</title>
  <link rel="stylesheet" href="../assets/bootstrap.min.css">
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="container-fluid banner">
    <p class="banner-text">Realtime Transcription</p>
    <a style="color: rgb(255, 255, 255);fill: rgb(255, 255, 255);fill-rule: evenodd; position: absolute; right: 10px; top: 4px;"
      class="Header-link " href="https://github.com/AgoraIO/API-Examples-Web/tree/main/Demo">
      <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32"
        aria-hidden="true">
        <path fill-rule="evenodd"
          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
        </path>
      </svg>
    </a>
  </div>

  <section id="alert-wrapper">
    <div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
      <strong>Congratulations!</strong><span> You can invite others to watch your live by click </span><a href=""
        target="_blank">here</a>
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div id="rtc-alert" class="alert alert-danger alert-dismissible fade show" role="alert">
      You should first join rtc!
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div id="parameters-alert" class="alert alert-danger alert-dismissible" role="alert">
      Please check the parameters!
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </section>


  <div class="container">
    <!-- rtc -->
    <form id="join-form" name="join-form">
      <div class="row join-info-group">
        <div class="col-sm sso-hidden">
          <p class="join-info-text">AppID</p>
          <input id="appid" type="text" placeholder="enter appid">
          <p class="tips">If you don`t know what is your appid, checkout <a
              href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#a-nameappidaapp-id">this</a>
          </p>
        </div>
        <div class="col-sm sso-hidden">
          <p class="join-info-text">Token(optional)</p>
          <input id="token" type="text" placeholder="enter token">
          <p class="tips">If you don`t know what is your token, checkout <a
              href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#a-namekeyadynamic-key">this</a>
          </p>
        </div>
        <div class="col-sm">
          <p class="join-info-text">Channel</p>
          <input id="channel" type="text" placeholder="enter channel name" required>
          <p class="tips">If you don`t know what is your channel, checkout <a
              href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#channel">this</a></p>
        </div>
        <div class="col-sm">
          <p class="join-info-text">User ID(optional)</p>
          <input id="uid" type="text" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" value="123456"
            onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')" placeholder="Enter the user ID">
        </div>
      </div>

      <div class="button-group">
        <button id="host-join" type="submit" class="btn btn-primary btn-sm">Join as host</button>
        <button id="audience-join" type="submit" class="btn btn-primary btn-sm">Join as audience</button>
        <button id="leave" type="button" class="btn btn-primary btn-sm" disabled>Leave</button>
      </div>
    </form>

    <form id="key-form" name="key-form">
      <div class="row join-info-group">
        <div class="col-sm">
          <div class="join-info-key">key</div>
          <input id="key" type="text" placeholder="enter the key">
          <p class="tips">The restful API security
            You find your key and secret in the <a href="https://console.agora.io/">Agora Console</a>
          </p>
        </div>
        <div class="col-sm">
          <div class="join-info-secret">secret</div>
          <input id="secret" type="text" placeholder="enter the secret">
        </div>
      </div>
    </form>
    <!-- stt -->
    <form id="stt-form" name="stt-form">
      <div class="row join-info-group">
        <div class="col-sm">
          <p class="join-info-text">User ID for the bot to pull the audio from channel</p>
          <input id="puller-uid" type="text" placeholder="enter the int uid" value="111111"
            onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"
            onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')">
        </div>
        <div class="col-sm">
          <p class="join-info-text">Token(optional)</p>
          <input id="puller-token" type="text" placeholder="token of the puller">
        </div>
        <div class="col-sm">
          <p class="join-info-text">User ID for the bot to push the text to channel</p>
          <input id="pusher-uid" type="text" placeholder="enter the int uid" value="222222"
            onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"
            onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')">
        </div>
        <div class="col-sm">
          <p class="join-info-text">Token(optional)</p>
          <input id="pusher-token" type="text" placeholder="token of the pusher">
        </div>
      </div>

      <!-- language -->
      <div class="row">
        <div class="col-sm">
          <p class="join-info-text">Speaking Language</p>
          <input id="speaking-language" type="text" placeholder="language code" value="en-US">
          <p class="tips">input the language code, such as en-US, zh-CN</p>
        </div>
        <div class="col-sm">
          <p class="join-info-text">Translation Language(optional)</p>
          <input id="translation-language" type="text" placeholder="language code" value="zh-CN">
          <p class="tips">input the language code, such as en-US, zh-CN</p>
        </div>
      </div>

      <div class="button-group">
        <button id="start-trans" type="submit" class="btn btn-primary btn-sm">Start Channel Transcription</button>
        <button id="stop-trans" type="button" class="btn btn-primary btn-sm" disabled>Stop task</button>
      </div>
    </form>


    <!-- trans -->
    <div class="title">After start the transcription, Please say something, you wil see the text here</div>
    <section class="row">
      <div class="col-sm" id="stt-transcribe" style="display:none">
        <div class="content">
        </div>
      </div>
      <div class="col-sm" id="stt-translate" style="display:none">
        <div class="content">
        </div>
      </div>
    </section>
  </div>

  
  <script src="../assets/jquery-3.4.1.min.js"></script>
  <script src="../assets/bootstrap.bundle.min.js"></script>
  <script src="https://download.agora.io/sdk/release/AgoraRTC_N.js"></script>
  <script src="./proto/protobuf.min.js"></script>
  <script src="./proto/index.js"></script>
  <script src="./stt.js"></script>

</body>

</html>
